<template>
	<theme-box title="素材管理" theme="primary">	
		<div class="alert alert-default">
			<form class="form-inline clearfix" @submit.prevent v-el:searchform>
				<div class="form-group">
					<label>素材类型：</label>				
					<select class="form-control" name="mediaType" v-el:searchtype  @change="requery">
							<option value="">全部</option>
							<option value="image">图片</option>
							<option value="news">图文</option>
					</select>
				</div>
				<!-- <v-button theme="primary">查询</v-button> -->
			</form>
		</div>
		<style>
			.box.img-responsive {
				width: 100%;
				height: 160px;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				background-size: cover;
				background-position: center center;			
			}
		</style>
		<div class="clearfix">
			<photo-item v-for="item in list">
				<div  v-if="item.url.trim()!=''"  class="box img-responsive" :style="{ 'background-image': 'url(' + item.url + ')' }"></div>						
				<div  v-else class="placeholder-cover box img-responsive">
				</div>
				<h4 class="clearfix">
					  <span class="pull-left">{{item.name}}</span>	
						<!-- <span class="pull-right">作者</span> -->
				</h4>
				<h4>
					  {{filterTime(item.createTime)}}
				</h4>
		    
				<v-button style="success" @click="open(item,$event)">
					<i class="fa fa-search fa-1x"></i>
				</v-button>

				<v-button theme="danger" @click="remove(item)">
					<i class="fa fa-remove fa-1x"></i>
				</v-button>
	
				<photo-container v-if="item.type == 'image'">				
						<img :src="item.url" alt="">
				</photo-container>					


			</photo-item>
			<create-modal v-ref:modal></create-modal>
		</div>
		<app-page v-ref:page></app-page>
	</theme-box>
</template>

<style>
	#filter-items .item {
		margin-bottom: 20px;
	}
</style>
<script>
import Page from 'pages/partial/page.vue';
import {dateFormat} from 'lib/method.js';	
import Modal from 'pages/partial/graphic.read.vue';	
	
	export default {
		data: () => ({
			list: []
		}),		
		components: {
			'app-page': Page,
			'create-modal': Modal		
		},				
		events: {
			'pagination': 'search'
		},
		methods: {
			filterTime(datetime) {
				 return dateFormat(datetime)
			},			
			open(item,e) {				
				let self = this;

				if(item.type == 'news') {
						let data = {
							artId: item.artId
						};
						let id = item.id;	
						self.$post({
							url: '/api/v1' + projectName_Url + '/wechat/media/querydef.html',
							data
						}).then(response=>{
							//获得图文信息
							let arr = response.content;
							let picIdArr = [];
							let picUrlArr = [];
							if(!arr) {
								console.error('content－无内容')
								return false;
							}							
							arr.forEach(json =>{
								if(json.picUrl.trim() == '') {
									json.show_cover_pic = 0;
								} else {
									json.show_cover_pic = 1;
								}
								picUrlArr.push(json.picUrl);
								json.content_source_url = json.picUrl;
								delete json.picUrl;

								picIdArr.push(json.localPicId);
								delete json.localPicId;

								json.thumb_media_id = json.thumbMediaId;
								delete json.thumbMediaId;

								delete json.id;
								delete json.description;
								delete json.url;
							})
							self.$refs.modal.editInit(arr,id,picIdArr,picUrlArr);

						},response=>{
							
						});					
				} else if(item.type == 'image') {					
					let item = $(e.target).closest(".item").find(".ui-modal").first().modal("show");					
				}
			
			},
			remove(item) {
					
				let map = {
					'news':'图文',
					'image':'图片'
				}
				let type= map[item.type];
				let message = {
					title: "操作提示",
					content: "您确认要删除"+type+"素材--"+ item.name +"？"
				}
				let data = {
					media: item.id.media,
					mchtIdFlag: item.id.mchtId
				}
				let self = this;
				Midway.confirm(message).then(function() {
					
					self.$post({
						url: '/api/v1' + projectName_Url + '/wechat/media/del.html',
						data
					}).then(response=>{
						let message = {
							title:"操作提示",
							content:"删除成功"
						}
						Midway.alert(message);
						//self.list.$remove(item);
						self.search();
						
					},response=>{

					});					
					
				})
			},
			requery() {
				let data = {
					type: this.$els.searchtype.value
				}						
				//重置分页
			  data.aoData = this.$refs.page.setData(8,1);
				this.$search({
					url: '/api/v1' + projectName_Url + '/wechat/media/query.html',
					data
				}).then(response=>{
					let total = response.content.total;
					this.$refs.page.init(total);
					this.$set("list",response.content.mediaList);
				},response=>{

				});				
			},				
			query(data) {
			  data.aoData = this.$refs.page.setData();
				this.$search({
					url: '/api/v1' + projectName_Url + '/wechat/media/query.html',
					data
				}).then(response=>{
					let total = response.content.total;
					this.$refs.page.init(total);
					this.$set("list",response.content.mediaList);
				},response=>{

				});				
			},
			search() {
				let data = {
					type: this.$els.searchtype.value
				}					
				this.query(data);
			}
		},
		ready() {
			  let data = {}
				this.query(data);
		}
	}
</script>